<template>
  <div class="login">
    <!-- 登录页面头部vant组件 -->
    <van-nav-bar left-arrow @click-left="onClickLeft" :border="false" />
    <!-- 版心 -->
    <div class="wrapper">
      <!-- 标题 -->
      <div class="title">壹点灵账号登录</div>
      <div class="tip">请放心注册和登录，壹点灵充分保护您的隐私</div>
      <!-- 电话输入框 -->
      <div class="tel same">
        <p>
          <span class="country">中国</span><i class="triangle"></i
          ><input
            type="text"
            placeholder="请输入手机号"
            @blur="telBlur"
            @focus="telFocus"
            v-model="telvalue"
          />
        </p>
        <span class="telerr" :style="{ color: telcolor }">{{ telerr }}</span>
      </div>
      <!-- 密码输入框 -->
      <div class="pas same">
        <input
          type="password"
          placeholder="输入密码"
          @blur="passBlur"
          @focus="passFocus"
          v-model="passvalue"
        />
        <span class="passerr" :style="{ color: passcolor }">{{ passerr }}</span>
      </div>
      <!-- 忘记密码 -->
      <p class="forget">忘记密码？</p>
      <!-- 登录按钮 -->
      <div class="login same">
        <input type="submit" name="" id="" value="登录" @click="clickLogin" />
        <span class="submiterr">{{ submiterr }}</span>
      </div>
      <!-- 同意协议 -->
      <div class="checked">
        <p>
          还没账号？
          <b @click="toRegistry">注册壹点灵</b>
        </p>
      </div>
      <!-- 分割线vant组件  -->
      <div class="divide">
        <van-divider
          :style="{
            color: '#ABABAB',
            borderColor: '#E4E4E4',
            padding: '0 16px',
            width: '220px',
          }"
        >
          第三方登录
        </van-divider>
      </div>
      <!-- 登录方式小图标 -->
      <div class="login-logo">
        <div class="wrap">
          <img class="weixin" src="../assets/img/login/微信小图标.png" alt="" />
          <img class="qq" src="../assets/img/login/qq小图标.png" alt="" />
        </div>
      </div>
      <!-- 同意协议 -->
      <div class="default">
        <p>登录即代表您同意《壹点灵用户使用协议》和《隐私协议》</p>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getPublicKey } from "../utils/api";
// import { JSEncrypt } from "jsencrypt";
export default {
  setup() {
    let telvalue = ref("");
    let passvalue = ref("");
    let telerr = ref("");
    let passerr = ref("");
    let telcolor = ref("");
    let passcolor = ref("");
    let telflag = true;
    let passflag = true;
    let publicKey = "";
    let submiterr = ref("");
    const router = useRouter();
    // const route = useRoute();
    const onClickLeft = () => {
      router.go(-1);
    };
    //做预登陆，拿到公钥
    onMounted(() => {
      window.onload = async () => {
        const res = await getPublicKey();
        publicKey = res.data.publicKey;
        console.log(publicKey);
      };
    });
    // 验证电话号
    const telFocus = () => {
      if (telvalue.value === "") {
        telerr.value = "";
      }
    };
    const telBlur = () => {
      // console.log(telvalue.value);
      let reg = /^1[3578]\d{9}$/;
      if (telvalue.value !== "") {
        if (reg.test(telvalue.value)) {
          // getRegistryTel({ tel: telvalue.value }).then((res) => {
          //   if (res.status === 0) {
          //     telerr.value = "√";
          //     telcolor.value = "green";
          //     telflag = true;
          //   } else {
          //     telerr.value = "此号码已注册，请更换其它手机号";
          //     telcolor.value = "green";
          //     telflag = false;
          //   }
          // });
          // telerr.value = "√";
          telcolor.value = "green";
          telflag = true;
        } else {
          telerr.value = "手机号码格式有误";
          telcolor.value = "red";
          telflag = false;
        }
      } else {
        telerr.value = "手机号码不能为空";
        telcolor.value = "red";
        telflag = false;
      }
    };
    // 验证密码
    const passFocus = () => {
      if (passvalue.value === "") {
        passerr.value = "";
      }
    };
    const passBlur = () => {
      // console.log(passvalue.value.length);
      if (passvalue.value !== "") {
        passflag = true;
      } else {
        passerr.value = "密码不能为空";
        passcolor.value = "red";
        passflag = false;
      }
    };
    const clickLogin = () => {
      if (telvalue.value === "") {
        telerr.value = "手机号码不能为空";
        telcolor.value = "red";
        telflag = false;
      }
      if (passvalue.value === "") {
        passerr.value = "密码不能为空";
        passcolor.value = "red";
        passflag = false;
      }
      // 引入JSEncrypt，去设置公钥
      // let encrypt = new JSEncrypt();
      // encrypt.setPublicKey(publicKey);

      // const userInfo = JSON.stringify({
      //   tel: telvalue.value,
      //   password: passvalue.value,
      // }); //需要加密的账号密码，要转成字符串

      // const encryptKey = encrypt.encrypt(userInfo); //使用公钥加密，得到密文

      // getLogin({ info: encryptKey }).then((res) => {
      //这里将后端返回的内容传递出来
      // if (res.status === 0) {
      //   localStorage.setItem("token", res.token);
      //将后端传来的token存到本地存储,首页也是可以拿到的
      // console.log(res.token)
      if (telflag && passflag) {
        let tel = localStorage.getItem("tel");
        let pass = localStorage.getItem("password");
        if (telvalue.value === tel && passvalue.value === pass) {
          localStorage.setItem("tokenstring", "asdfghjklrgfhtfghgthg");
          // location.href = "http://localhost:8080/#/home/index";
          let path = localStorage.getItem("path");
          //  path==="/registry"?router.push():router.push();
          router.push(path);
        } else {
          console.log(submiterr.value);
          submiterr.value = "密码或用户名错误";
        }
      }
    };
    const toRegistry = () => {
      router.replace("/registry");
    };
    return {
      onClickLeft,
      telvalue,
      telerr,
      telcolor,
      telFocus,
      telBlur,
      passvalue,
      passerr,
      passcolor,
      passFocus,
      passBlur,
      telflag,
      passflag,
      toRegistry,
      clickLogin,
      publicKey,
      submiterr,
    };
  },
};
</script>
<style lang="less">
// 重置vant组件样式
:root {
  --van-nav-bar-icon-color: #1d1d1d;
  --van-nav-bar-arrow-size: 20px;
  --van-border-width-base: 3px;
  --van-divider-font-size: 12px;
}
html,
body {
  height: 100%;
  width: 100%;
}
// 头部vant组件箭头样式
.van-icon-arrow-left {
  font-weight: bolder;
  width: 19px;
  height: 30px;
  margin-top: 21px;
}
// input的placeholder样式
input::-webkit-input-placeholder {
  color: #aaaaaa;
  font-weight: 540;
}
// 版心
.login {
  // 页面全局字体
  font-family: PingFang SC;
  // 版心
  .wrapper {
    margin: 0 34px;
    margin-top: 24px;
    .same {
      margin-bottom: 15px;
      width: 307px;
      height: 36px;
      background: #f6f6f6;
      border-radius: 5px;
      // 验证提示错误
      .telerr,
      .passerr {
        display: inline-block;
        margin-top: 2.5px;
        text-align: right;
        width: 100%;
      }
      .passerr {
        margin-top: 10px;
      }
    }
    //标题
    .title {
      font-size: 20px;
      font-weight: bold;
      color: #282828;
    }
    // 标题下面的提示
    .tip {
      margin-top: 10px;
      font-size: 10px;
      font-weight: 500;
      color: #c5c5c5;
    }
    // input共同样式
    input {
      outline: none;
      border: 0;
      background: #f6f6f6;
      display: inline-block;
      font-size: 14px;
      font-weight: 540;
    }
    // 电话
    .tel {
      margin-top: 20px;
      vertical-align: middle;
      .country {
        display: inline-block;
        margin: 8px 8px;
        font-size: 16px;
        font-weight: 600;
        color: #656565;
      }
      .triangle {
        display: inline-block;
        height: 0;
        width: 0px;
        border-top: 4.5px solid #626262;
        border-right: 4.5px solid transparent;
        border-left: 4.5px solid transparent;
        vertical-align: middle;
        margin-right: 16px;
      }
    }
    // 密码
    .pas,
    .login {
      input {
        margin: 7px 7px;
        width: 95%;
        height: 20px;
        font-weight: 540;
      }
    }
    .pas {
      margin-bottom: 0px;
    }
    // 忘记密码
    .forget {
      font-size: 12px;
      color: #656565;
      margin-top: 8px;
    }
    // 登录按钮
    .login {
      background: #3ca2f5;
      margin-top: 15px;
      position: relative;
      input {
        background: #3ca2f5;
        color: #fff;
      }
      .submiterr {
        color: red;
        top: 38px;
        right: 0px;
        position: absolute;
      }
    }
    // 同意协议
    .checked {
      vertical-align: middle;
      font-size: 12px;
      color: #c5c5c5;
      line-height: 16px;
      b {
        font-weight: 700;
        color: #656565;
      }
    }
    // 分割线-vant组件
    .divide {
      position: absolute;
      bottom: 110px;
      left: 77.5px;
      font-weight: 550;
    }
    // 登录小图标
    .login-logo {
      width: 100%;
      height: 34px;
      position: absolute;
      bottom: 78px;
      left: 0;
      .wrap {
        width: 102px;
        margin: 0 auto;
        img {
          height: 34px;
          width: 34px;
        }
        .weixin {
          margin-right: 34px;
        }
      }
    }
    // 同意协议
    .default {
      vertical-align: middle;
      color: #c5c5c5;
      position: absolute;
      bottom: 30px;
      left: 0px;
      width: 100%;
      p {
        width: 100%;
        text-align: center;
        font-size: 10px;
      }
    }
  }
}
</style>
